<template>
  <div class="cart-card px-20">
    <up-swipe-action>
      <div v-for="(item, index) in cartList" :key="index" class="cart-item">
        <up-swipe-action-item
          class="action-item flex column"
          :ref="el => { swipeRef[index] = el }"
          :options="operate"
          :index="index"
          :autoClose="true"
          @click="onDelete(index)"
        >
        </up-swipe-action-item>
        <div class="cart-box cart-box-item flex items-center px-32" >
          <div class="icon-main mr-20" v-if="selected">
            <image v-if="item.selected" :src="IMG_URL2+'login/checkbox1.svg'" @click="onSelect(index)" />
            <image v-else :src="IMG_URL2+'login/checkbox.svg'" @click="onSelect(index)" />
          </div>
          <div class="cart-main flex flex1 items-center" @click="onGoodsDetail(item)">
            <div class="left_image mr-20">
              <image class="cart-image" :src="item.productImg" />
            </div>
            <div class="left_box">
              <div class="cart-title f-24 ellipsis-2">{{ item.name }}</div>
              <div class="cart-count flex justify-between items-center mt-10">
                <div class="flex items-end">
                  <text class="unit-price f-24">￥</text>
                  <text class="unit-price f-24 bold">{{ item.unitPrice }}</text>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-for="(items,nindex) in item.skuList" :key="nindex" class="cart-line cart-box flex items-center px-32 mb-24">
          <div class="icon-main mr-20" v-if="selected">
            <image v-if="items.selected" :src="IMG_URL2+'login/checkbox1.svg'" @click="onSelect1(index,nindex)" />
            <image v-else :src="IMG_URL2+'login/checkbox.svg'" @click="onSelect1(index,nindex)" />
          </div>
          <div class="cart-main flex flex1 items-center">
            <div class="left_image mr-20" @click="onGoodsDetail(item)">
              <image class="cart-image1" :src="items.skuImg" />
            </div>
            <div class="left_box flex1">
              <div class="cart-title1 f-24 ellipsis-2" @click="onGoodsDetail(item)">{{ items.skuSpec }}</div>
              <div class="cart-count flex justify-between items-center mt-10">
                <div>
                  <text class="input cart-reduce" @click="onMinus(index,nindex)">-</text>
                  <text class="input cart-text">{{ items.quantity }}</text>
                  <text class="input cart-add" @click="onAdd(index,nindex)">+</text>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </up-swipe-action>
  </div>
</template>

<script setup>
import { IMG_URL2 } from "@/config";
const emit = defineEmits(["delete", "select", "minus", "add"]);
const props = defineProps({
  cartList: {
    type: Array,
    default: () => {
      return [];
    }
  },
  selected:{
    type: Boolean,
    default: true
  }
});

const operate = ref([
  {
    text: "删除",
    style: {
      backgroundColor: "rgba(214, 142, 68, 1)"
    }
  }
]);
const swipeRef = ref([]);

const onDelete = (id) => {
  emit("delete", id);
};

const onSelect = (index) => {
  emit("select", index);
};

const onSelect1 = (index,nindex) => {
  emit("select1",  index,nindex);
}

const onMinus = (index,nindex) => {
  emit("minus", index,nindex);
};

const onAdd = (index,nindex) => {
  emit("add", index,nindex);
};

// 商品详情
const onGoodsDetail = (item) => {
  uni.navigateTo({
    url: "/pages/good/details?id=" + item.productId
  });
};

// 处理u-swipe-action-item不复位的问题
const resetSwipeAction = () => {
  swipeRef.value[0].closeHandler();
  console.log("是谁", swipeRef.value);
};
defineExpose({ resetSwipeAction });
</script>

<style lang="scss" scoped>
.cart-card {
  padding: 24rpx 24rpx 150rpx;
  box-sizing: border-box;
  .cart-item{
    background: #ffffff;
    margin-bottom: 24rpx;
    padding: 24rpx 0 12rpx;
  }
  .action-item {
    border-radius: 16rpx;
  }
  .cart-box-item{
    width: 100%;
    box-sizing: border-box;
  }
  .cart-name {
    height: 96rpx;
    line-height: 96rpx;
    border-bottom: 2rpx solid #e6e6e6;
    .shop-img {
      width: 40rpx;
      height: 40rpx;
      vertical-align: text-bottom;
    }
  }
  .left_image{
    display: flex;
  }
  .icon-main {
      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
    .cart-main {
      display: flex;
      width: calc(100% - 50rpx);
      .cart-image {
        width: 96rpx;
        height: 96rpx;
        border-radius: 8px;
      }
      .cart-image1{
        width: 48rpx;
        height: 48rpx;
        border-radius: 4px;
      }
      .left_box {
        width: calc(100% - 50rpx);
        display: flex;
        align-items: center;
        justify-content: space-between;
        .cart-title {
          height: 80rpx;
          line-height: 40rpx;
        }
        .cart-title1{
          width: 240rpx;
        }
        .cart-specif {
          display: inline-block;
          padding: 4rpx 12rpx;
          box-sizing: border-box;
          background: #999999;
          color: #ffffff;
          font-size: 24rpx;
          height: 36rpx;
          line-height: 36rpx;
          margin-bottom: 10rpx;
          border-radius: 50rpx;
        }
        .cart-count {
          .unit-price {
            color: #f00;
          }
          .input {
            display: block;
            text-align: center;
            float: left;
          }
          .cart-reduce {
            width: 44rpx;
            height: 44rpx;
            line-height: 40rpx;
            border-right: none;
            border: 2rpx solid #ededed;
            border-radius: 8rpx 0rpx 0rpx 8rpx;
            font-size: 36rpx;
            color: #cccccc;
          }
          .cart-text {
            width: 44rpx;
            height: 44rpx;
            line-height: 44rpx;
            border-top: 2rpx solid #ededed;
            border-bottom: 2rpx solid #ededed;
            font-size: 28rpx;
          }
          .cart-add {
            width: 44rpx;
            height: 44rpx;
            line-height: 40rpx;
            border-left: none;
            border: 2rpx solid #ededed;
            border-radius: 0rpx 8rpx 8rpx 0rpx;
            font-size: 36rpx;
            color: #cccccc;
          }
        }
      }
    }
}
</style>
